<template>
  <div class="container">
    <el-card>
      <div class="outer">
        <div class="pay-main">
          <div class="pay-container">
            <div class="checkout-tit">
              <h4 class="tit-txt" style="display: flex;justify-content: space-between">
               <span>
                  <span class="success-icon"></span>
                <span class="success-info">订单提交成功，请您及时付款，以便尽快为您发货~~</span>
               </span>
                <span class="success-info" style="color: red;font-weight: 700;font-size: 30px">
                  <span>{{ hours }}</span> :
                  <span>{{ minutes }}</span> :
                  <span>{{ seconds }}</span>
                </span>

              </h4>
              <div class="paymark">
								<span class="fl">请您在提交订单<em
                    class="orange time">
                  规定时间
                </em>之内完成支付，超时订单会自动取消。订单号：<em>{{ orderForm.orderSn }}</em></span>
                <span class="fr"><em class="lead">应付金额：</em><em
                    class="orange money">￥{{ payPrice }}</em></span>
              </div>
            </div>
            <div class="checkout-info">
              <h4>重要说明：</h4>
              <ol>
                <li>Small商城支付平台目前支持<span class="zfb">支付宝</span>支付方式。</li>
                <li>其它支付渠道正在调试中，敬请期待。</li>
                <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
              </ol>
              <!-- 	<h4>支付宝账户信息：（很重要，<span class="save">请保存！！！</span>）</h4> -->
            </div>
            <div class="checkout-steps">
              <div class="step-tit">
                <h5>支付平台</h5>
              </div>
              <div class="step-cont">
                <ul class="payType">
                  <li @click="gotoPay(1)" :class="{color:togglePayColor==1}"><img
                      src="./images/pay2.jpg"></li>
                  <li @click="Nodevelopment"><img src="./images/pay3.jpg"></li>
                </ul>

              </div>
              <div class="otherpay">
                <div class="step-tit">
                  <h5>其他支付方式</h5>
                </div>
                <div class="step-cont">
                  <el-input type="samll" style="width: 300px" disabled v-model="UserBalance">
                    <template slot="prepend">剩余额</template>
                    <template slot="append">元</template>
                  </el-input>
                  <el-checkbox v-model="checkedBalance" @change="checkedBalanceChange" style="margin: 0 10px">
                    <span>余额支付</span>
                  </el-checkbox>
                </div>
              </div>
              <div class="hr"></div>
              <div class="payshipInfo">
                <div class="step-tit">
                  <h5>支付网银</h5>
                </div>
                <div class="step-cont">
                  <ul class="payType">
                    <li @click="Nodevelopment"><img src="./images/pay10.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay11.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay12.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay13.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay14.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay15.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay16.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay17.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay18.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay19.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay20.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay21.jpg"></li>
                    <li @click="Nodevelopment"><img src="./images/pay22.jpg"></li>
                  </ul>
                </div>
              </div>
              <div class="hr"></div>
              <div class="submit" @click="submit">
                <a class="btn">立即支付</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {Message} from "element-ui";
import base64 from "@/utils/base64";
import {balancePay} from "@/api/order/order";

export default {
  name: "PayPage",
  data() {
    return {
      orderList: {},
      togglePayColor: 0,
      orderId: 0,
      orderForm: {},
      payPrice: 0,
      timer: null, // 定时器
      hours: '00',
      minutes: '00',
      seconds: '00',
      expire: 0,
      checkedBalance: false,
      UserBalance: 0
    };
  },
  created() {
    this.orderForm = JSON.parse(base64.decode(this.$route.query.orderId))
    this.getPayList()
  },
  methods: {
    checkedBalanceChange(val) {
      if (val) {
        this.togglePayColor = 1000
      }
    },
    getPayList() {
      this.$api.order.getOrderList(this.orderForm.orderSn).then(res => {
        if (res.code == 200) {
          this.orderList = res.data.orderItemList
          this.payPrice = res.data.payPrice
          this.expire = res.data.expire
          this.UserBalance = res.data.UserBalance
          if (this.expire<0){
            this.$message.warning("订单已过期~")
            this.$router.push("/")
          }
          this.startCountdown();
        }
      })
    },
    gotoPay(index) {
      if (this.togglePayColor == index) {
        this.togglePayColor = 1000
      } else {
        this.togglePayColor = 1;
      }
      this.checkedBalance = false
    },
    Nodevelopment() {
      Message.success("暂未开发");
    },
    submit() {
      if (this.checkedBalance == false && this.togglePayColor != 1) {
        return Message.warning("请选择支付方式~")
      }
      if (this.checkedBalance) {//余额支付
        if (this.UserBalance < this.payPrice){
          return Message.warning("余额不足，请充值~")
        }
        this.$api.order.balancePay(this.orderForm.orderSn).then(res=>{
          if (res.code==200){
            Message.success("支付成功~")
            this.$router.push({path: "/UserInfo/order"})
          }
        })

      } else {//支付宝支付
        this.$api.order.aliPay(this.orderForm.orderSn).then(res => {
          if (res.code == 200) {
            const div = document.createElement("div")
            div.innerHTML = res.data
            document.body.appendChild(div)
            document.forms[0].submit()
          }
        })
      }
      // api.common.alipay(this.orderId).then(res => {
      //   const div = document.createElement("div");
      //   div.innerHTML = res.message;
      //   document.body.appendChild(div);
      //   document.forms[0].submit();
      // });
    },
    // 开始倒计时
    startCountdown() {
      // 清除之前的定时器
      if (this.timer) {
        clearInterval(this.timer);
      }
      // 启动新的定时器
      this.timer = setInterval(() => {
        if (this.expire > 0) {
          this.expire--;
          this.updateTime();
        } else {
          // 倒计时结束，停止定时器
          clearInterval(this.timer);
          this.hours = '00';
          this.minutes = '00';
          this.seconds = '00';
          this.$message.warning("订单已过期~")
          this.$router.push("/")
        }
      }, 1000);
    },
    // 更新时间显示
    updateTime() {
      const hours = Math.floor(this.expire / 3600);
      const minutes = Math.floor((this.expire % 3600) / 60);
      const seconds = this.expire % 60;

      this.hours = this.padTime(hours);
      this.minutes = this.padTime(minutes);
      this.seconds = this.padTime(seconds);
    },
    // 格式化时间
    padTime(time) {
      return time.toString().padStart(2, '0');
    },
    // 更新数据（模拟从服务器获取数据）
    updateData(newExpire, newPayPrice) {
      this.expire = newExpire;
      this.payPrice = newPayPrice;
      this.startCountdown(); // 重新启动倒计时
    }
  },
  beforeDestroy() {
    // 组件销毁时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped lang="less">
.color {
  border: 1px solid red !important;
}

.container {
  width: 1250px;
  min-height: 500px;
  margin: 10px auto;
  text-align: left;
}

.outer .header > .top {
  background-color: #eaeaea;
  height: 30px;
  line-height: 30px;
}

.outer .header > .top .container {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.outer .header > .top .container .loginList {
  float: left;
}

.outer .header > .top .container .loginList p {
  float: left;
  margin-right: 10px;
}

.outer .header > .top .container .loginList p .register {
  border-left: 1px solid #b3aeae;
  padding: 0 5px;
  margin-left: 5px;
}

.outer .header > .top .container .typeList {
  float: right;
}

.outer .header > .top .container .typeList a {
  padding: 0 10px;
}

.outer .header > .top .container .typeList a + a {
  border-left: 1px solid #b3aeae;
}

.outer .header > .bottom {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.outer .header > .bottom .logoArea {
  float: left;
}

.outer .header > .bottom .logoArea .logo img {
  width: 175px;
  margin: 25px 45px;
}

.outer .header > .bottom .searchArea {
  float: right;
  margin-top: 35px;
}

.outer .header > .bottom .searchArea .searchForm {
  overflow: hidden;
}

.outer .header > .bottom .searchArea .searchForm input {
  box-sizing: border-box;
  width: 490px;
  height: 32px;
  padding: 0px 4px;
  border: 2px solid #ea4a36;
  float: left;
}

.outer .header > .bottom .searchArea .searchForm input:focus {
  outline: none;
}

.outer .header > .bottom .searchArea .searchForm button {
  height: 32px;
  width: 68px;
  background-color: #ea4a36;
  border: none;
  color: #fff;
  float: left;
  cursor: pointer;
}

.outer .header > .bottom .searchArea .searchForm button:focus {
  outline: none;
}

.outer .pay-main {
  margin-bottom: 20px;
}

.outer .pay-main .pay-container {
  margin: 0 auto;
  width: 1200px;
}

.outer .pay-main .pay-container a:hover {
  color: #4cb9fc;
}

.outer .pay-main .pay-container .orange {
  color: #e1251b;
}

.outer .pay-main .pay-container .money {
  font-size: 18px;
}

.outer .pay-main .pay-container .zfb {
  color: #e1251b;
  font-weight: 700;
}

.outer .pay-main .pay-container .checkout-tit {
  padding: 10px;
}

.outer .pay-main .pay-container .checkout-tit .tit-txt {
  font-size: 14px;
  line-height: 21px;
}

.outer .pay-main .pay-container .checkout-tit .tit-txt .success-icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(./images/icon.png) no-repeat 0 0;
}

.outer .pay-main .pay-container .checkout-tit .tit-txt .success-info {
  padding: 0 8px;
  line-height: 30px;
  vertical-align: top;
}

.outer .pay-main .pay-container .checkout-tit .paymark {
  overflow: hidden;
  line-height: 26px;
  text-indent: 38px;
}

.outer .pay-main .pay-container .checkout-tit .paymark .fl {
  float: left;
}

.outer .pay-main .pay-container .checkout-tit .paymark .fr {
  float: right;
}

.outer .pay-main .pay-container .checkout-tit .paymark .fr .lead {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
}

.outer .pay-main .pay-container .checkout-info {
  padding-left: 25px;
  padding-bottom: 15px;
  margin-bottom: 10px;
  border: 2px solid #e1251b;
}

.outer .pay-main .pay-container .checkout-info h4 {
  margin: 9px 0;
  font-size: 14px;
  line-height: 21px;
  color: #e1251b;
}

.outer .pay-main .pay-container .checkout-info ol {
  padding-left: 25px;
  list-style-type: decimal;
  line-height: 24px;
  font-size: 14px;
}

.outer .pay-main .pay-container .checkout-info ul {
  padding-left: 25px;
  list-style-type: disc;
  line-height: 24px;
  font-size: 14px;
}

.outer .pay-main .pay-container .checkout-steps {
  border: 1px solid #ddd;
  padding: 25px;
}

.outer .pay-main .pay-container .checkout-steps .hr {
  height: 1px;
  background-color: #ddd;
}

.outer .pay-main .pay-container .checkout-steps .step-tit {
  line-height: 36px;
  margin: 15px 0;
}

.outer .pay-main .pay-container .checkout-steps .step-cont {
  margin: 0 10px 12px 20px;
}

.outer .pay-main .pay-container .checkout-steps .step-cont ul {
  font-size: 0;
}

.outer .pay-main .pay-container .checkout-steps .step-cont ul li {
  margin: 2px;
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #ddd;
  cursor: pointer;
  line-height: 18px;
}

.outer .pay-main .pay-container .submit {
  text-align: center;
}

.outer .pay-main .pay-container .submit .btn {
  display: inline-block;
  padding: 15px 45px;
  margin: 15px 0 10px;
  font: 18px "微软雅黑";
  font-weight: 700;
  border-radius: 0;
  background-color: #e1251b;
  border: 1px solid #e1251b;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.outer .footer {
  background-color: #eaeaea;
}

.outer .footer .footer-container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.outer .footer .footer-container .footerList {
  padding: 20px;
  border-bottom: 1px solid #e4e1e1;
  border-top: 1px solid #e4e1e1;
  overflow: hidden;
  padding-left: 40px;
}

.outer .footer .footer-container .footerList .footerItem {
  width: 16.6666667%;
  float: left;
}

.outer .footer .footer-container .footerList .footerItem h4 {
  font-size: 14px;
}

.outer .footer .footer-container .footerList .footerItem .footerItemCon li {
  line-height: 18px;
}

.outer .footer .footer-container .footerList .footerItem:last-child img {
  width: 121px;
}

.outer .footer .footer-container .copyright {
  padding: 20px;
}

.outer .footer .footer-container .copyright .helpLink {
  text-align: center;
}

.outer .footer .footer-container .copyright .helpLink li {
  display: inline;
}

.outer .footer .footer-container .copyright .helpLink li .space {
  border-left: 1px solid #666;
  width: 1px;
  height: 13px;
  background: #666;
  margin: 8px 10px;
}

.outer .footer .footer-container .copyright p {
  margin: 10px 0;
  text-align: center;
}
</style>
